<template>
  <a-col :span="labelSpan">
    <a-form-model-item
      :label="attrObj.formLabel"
      :prop="attrObj.formProps"
    >
      <a-input
        v-model.trim="attrObj.formModel[attrObj.formProps]"
        :placeholder="changePlaceholder()"
        :maxLength="attrObj.maxLength"
        :type="attrObj.type"
        :disabled="attrObj.fixedDisabled || attrObj.isDisabled"
        onkeyup="if(type === 'number')value=value.replace(/[^\d]/g,'')"
        @input="intValidator"
        @change="onHandleChange"
        class="form-ipt"
        v-bind="$attrs"
        v-on="$listeners"
      />
    </a-form-model-item>
  </a-col>
</template>

<script>
import { PLACEHOLDER_INPUT } from "@/config/const";
import Regex from "../../utils/regex";
export default {
  name: "FormInput",
  data() {
    // const CheckNameFun = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("不能为空"));
    //   } else if (!Regex.userName.test(value)) {
    //     callback(new Error("只能输入汉字、英文、数字"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      PLACEHOLDER_INPUT,
      rules: [
        {
          pattern: Regex.userName,
          message: "只能输入汉字、英文、数字",
          trigger: "blur"
        }
      ]
    };
  },
  props: {
    labelSpan: {
      type: Number,
      default: 6
    },
    attrObj: {
      type: Object,
      default() {
        return {
          formLabel: "",
          formProps: "",
          formModel: {},
          isDisabled: false,
          maxLength: 20,
          type: "",
          fixedDisabled: false
        };
      }
    }
  },
  methods: {
    intValidator(e) {
      if (this.attrObj.type !== "number") return;
      let value = e.target.value.toString();
      //判断不要超过位数
      if (value.length > this.attrObj.maxLength) {
        value = value.slice(0, this.attrObj.maxLength);
        this.attrObj.formModel[this.attrObj.formProps] = value;
      }
    },
    changePlaceholder() {
      if (this.attrObj.fixedDisabled) return "";
      if (this.attrObj.isDisabled) return "";
      return PLACEHOLDER_INPUT;
    },
    onHandleChange() {
      this.$emit("handleChange");
    }
  }
};
</script>

<style lang="less" scoped>
.form-ipt {
  width: 70%;
}
// 去掉input type=number 内部箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
